<!-- 定义API后端服务 -->
<div class="console-panel console-mt4 createAPI3 hide">
    <div class="console-panel-header">
        <span class="console-panel-header-line"></span>
        <div class="console-float-left ng-binding" style="font-weight: bold;">后端基础定义</div>
    </div>
    <div class="console-panel-body console-p4 console-pt6 console-pb6">
        <div class="console-form">
            <table width="100%">
                <tr>
                    <td width="18%" style="padding-right:20px;text-align: right;"
                        class="ng-binding">
                        后端服务类型
                    </td>
                    <td>
                        <label class="console-radio" onclick="httpOnClick()">
                            <input type="radio" <#if context.api?? && context.api.serverEntrance.serverType == "HTTP_HTTPS"> checked="checked" </#if>
                                   name="backendType"
                                   value="HTTP_HTTPS" id="backendType_http_s"
                                   class="form-check-input">
                            <span>HTTP/HTTPS</span>
                        </label>
                        <label class="console-radio" style="margin-left:10px;"
                               onclick="redirectOnClick()">
                            <input type="radio"
                                   name="backendType" <#if context.api?? && context.api.serverEntrance.serverType == "REDIRECT"> checked="checked" </#if>
                                   value="REDIRECT"
                                   class="form-check-input">
                            <span>页面跳转</span>
                        </label>
                        <label class="console-radio" style="margin-left:10px;"
                               onclick="customizeOnClick()">
                            <input type="radio"
                                   name="backendType" <#if context.api?? && context.api.serverEntrance.serverType == "CUSTOM"> checked="checked" </#if>
                                   value="CUSTOM"
                                   class="form-check-input">
                            <span>自定义服务</span>
                        </label>
                        <label class="console-radio" style="margin-left:10px;"
                               onclick="localOnClick()">
                            <input type="radio"
                                   name="backendType" <#if context.api?? && context.api.serverEntrance.serverType == "CUSTOM"> checked="checked" </#if>
                                   value="CUSTOM"
                                   class="form-check-input">
                            <span>网关直接处理</span>
                        </label>
                    </td>
                </tr>
                <tbody class="http_body">
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right;">HTTP Method</td>
                    <td>
                        <select class="form-select w-25"
                                id="serverMethod">
                            <#if context.api?? && context.api.serverEntrance.serverType == "HTTP_HTTPS">
                                <option value="${context.api.serverEntrance.body.method}"
                                        selected="selected">${context.api.serverEntrance.body.method}</option></#if>
                            <option value="GET">GET</option>
                            <option value="POST">POST</option>
                            <option value="OPTIONS">OPTIONS</option>
                            <option value="HEAD">HEAD</option>
                            <option value="PUT">PUT</option>
                            <option value="DELETE">DELETE</option>
                            <option value="TRACE">TRACE</option>
                            <option value="CONNECT">CONNECT</option>
                            <option value="PATCH">PATCH</option>
                            <option value="OTHER">OTHER</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right;"
                        class="ng-binding">后端超时
                    </td>
                    <td style="display: flex;align-items: center;gap: .8rem;">
                        <input type="text" <#if context.api?? && context.api.serverEntrance.serverType == "HTTP_HTTPS"> value="${context.api.serverEntrance.body.timeOut?c}" <#else> value="6000" </#if>
                               class="form-control w-25"
                               id="serverTimeOut" maxlength="7">
                        <span class="custom-comment-text">ms</span>
                    </td>
                </tr>
                <tr class="balance-hide-show">
                    <td width="18%" style="padding-right:20px;text-align: right;"
                        class="ng-binding">
                        负载均衡策略
                    </td>
                    <td>
                        <label class="console-radio">
                            <input type="radio" checked="checked" name="balanceType"
                                   value="POLLING_AVAILABLE" class="form-check-input">
                            <span>轮询可用连接 </span>
                        </label>
                        <label class="console-radio" <#if context.api?? && context.api.serverEntrance.serverType == "HTTP_HTTPS"> <#if context.api.serverEntrance.body.balanceType == "IP_HASH"> checked="checked" </#if></#if>
                               style="margin-left:10px;">
                            <input type="radio" name="balanceType" value="IP_HASH"
                                   class="form-check-input">
                            <span>IP哈希化 </span>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right;"
                        class="ng-binding"
                        title="当后台连接失败大于2次时,该服务URL会标记为不可用,系统会根据重试时间测试该URL是否可用,如果可用则改为可用">
                        请求服务失败重试时间
                    </td>
                    <td style="display: flex;align-items: center;gap: .8rem;">
                        <input type="text"
                                <#if context.api?? && context.api.serverEntrance.serverType == "HTTP_HTTPS"> value="${context.api.serverEntrance.body.retryTime?c}" <#else> value="30000" </#if>
                               class="form-control w-25"
                               id="serverRetryTime" maxlength="7"
                               placeholder="请输入当后台连接失败大于2次时的重试时间">
                        <span class="custom-comment-text">ms</span>
                    </td>
                </tr>
                <tr>
                    <td style="padding-right:20px;text-align: right;border-right: 1px solid #e1e6eb;border-bottom: none;" rowspan="4"
                        class="ng-binding">
                        <span class="red">* </span>后端服务URL
                    </td>
                </tr>
                <tr>
                    <td class="custom-comment-text" style="border: none;padding-top: 0px;">
                        <span >如果有Path请求参数需要加上 : 号,示例:[http://127.0.0.1/test/:name]该URL会填充name位置的值<br></span>
                        <span>权重表示该URL被访问的次数,比如A=1,B=3,在4次请求中A被请求1次,B被请求3次,IP哈希化时,A被分配1次,B被分配3次</span>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top: 3px; border: 0;display: flex; align-items: center; gap: .8rem;" class="input-server-box">
                        <input type="text"
                               class="form-control w-50 input-server-url"
                               placeholder="请输入URL 示例: http://127.0.0.1/test">
                        权重: <input type="text" class="form-control"
                                     placeholder="权重值" style="width: 6rem">
                        <a class="console-button console-button-green console-button-tiny"
                           style="width:auto;" onclick='addServerURL()'>
                           <span class="ng-scope ng-binding">增加一条</span>
                        </a>
                        <a style="white-space:nowrap"><span style='cursor:pointer;' class="" onclick='testServerURL(this)'> 测试连接</span></a>
                    </td>
                </tr>
                <#if context.api?? && context.api.serverEntrance.body.serverUrls?exists>
                    <#list context.api.serverEntrance.body.serverUrls as item >
                        <tr>
                            <td style="padding-top: 3px; border: 0;display: flex; align-items: center; gap: .8rem;" class="input-server-box">
                                <input type="text" value="${item.url}"
                                       class="form-control w-50 input-server-url"
                                       placeholder="请输入URL 示例: http://127.0.0.1/test">
                                权重: <input type="text" value="${item.weight}"
                                             class="form-control"
                                             placeholder="权重值" style="width: 6rem">
                                <a style="white-space:nowrap"><span style="cursor:pointer;" class="ng-scope ng-binding" onclick='delServerURL(this)'> 移除 </span></a>
                                <a style="white-space:nowrap">| <span style="cursor:pointer;" class="" onclick='testServerURL(this)'> 测试连接</span></a>
                            </td>
                        </tr>
                    </#list>
                </#if>
                </tbody>
                <tbody class="custom_body" style="display: none;">
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right;">变量类型</td>
                    <td>
                        <select class="form-select w-25"
                                id="custom_server_type">
                            <option value="GET_SERVER_UNIX_TIMESTAMP" selected="selected">
                                返回UNIX时间戳
                            </option>
                            <option value="GET_CONSTANT_VALUE">返回自定义变量</option>
                            <option value="SESSION_TOKEN_GRANT_AUTH">Session-Token授权</option>
                            <#if context.api?? && context.api.serverEntrance.serverType == "CUSTOM">
                                <option value="${context.api.customFactoryName}"
                                        selected="selected">${context.api.customFactoryName}</option>
                            </#if>
                        </select>
                        <span class="custom_server_type_tips"></span>
                    </td>
                </tr>
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right;border: 0;"
                        class="ng-binding">配置文件
                    </td>
                    <td style="border: 0;">
                        <textarea id="custom-option" type="text" rows="6"
                                  class="form-control w-50"
                                  placeholder="请输入自定义服务处理器需要的配置文件json格式"
                                  style="width: 600px;"><#t><#if context.api?? && context.api.serverEntrance.serverType == "CUSTOM"><#t>${context.api.customBody}<#t><#else>{"resultFormat":"$(val)"}</#if></textarea>
                    </td>
                </tr>
                </tbody>
                <tbody class="redirect_body" style="display: none;">
                <tr>
                    <td align="right" style="padding-right:20px;text-align: right; border: 0;"
                        class="ng-binding">跳转页面的URL
                    </td>
                    <td style=" border: 0;">
                        <input type="text" id="redirect_url"
                               value="<#if context.api?? && context.api.serverEntrance.serverType == "REDIRECT">${context.api.serverEntrance.body.url!}</#if>"
                               class="form-control w-50"
                               placeholder="请输入跳转页面(特殊文字(例如中文)需要先URL编码)">
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>


    <div class="console-panel console-mt4 mt-4">
        <div class="console-panel-header">
            <span class="console-panel-header-line"></span>
            <div class="console-float-left ng-binding" style="font-weight: bold;">后端服务参数配置
            </div>

        </div>
        <div class="request-param-setter ng-isolate-scope ng-pristine ng-valid txt-center bParam-config">
            <table>
                <tbody>
                <tr>
                    <th class="ng-binding">后端参数名称</th>
                    <th class="ng-binding">后端参数位置</th>
                    <th class="ng-binding">对应入参名称</th>
                    <th class="ng-binding">对应入参位置</th>
                    <th class="ng-binding">对应入参类型</th>
                    <th class="ng-binding">操作</th>
                </tr>

                </tbody>
            </table>
            <div class="pagination-gird-container request-param-setter-errormessage ng-binding ng-hide">
                <i class="icon-no-2 console-mr1 console-inline-block"></i>
            </div>
            <div class="console-clearfix" style="padding-bottom: 10px; padding-top: 10px;">
                <span class="console-button-wrap ng-isolate-scope" theme="green" size="tiny"
                      icon="add">
                    <a class="console-button console-button-green console-button-tiny addPassParamx">
                        <span>
                            <span class="ng-scope ng-binding">增加一条</span>
                        </span>
                    </a>
                </span>
            </div>
        </div>
    </div>

    <div class="console-panel console-mt4">
        <div class="console-panel-header">
            <span class="console-panel-header-line"></span>
            <div class="console-float-left ng-binding clearfloat" style="font-weight: bold;">
                透传用户请求参数

            </div>
        </div>
        <div class="api-param-map-setter passParamBody">
            <table>
                <tbody>
                <tr>
                    <th width="20%" class="ng-binding">请求参数名字</th>
                    <th width="20%" class="ng-binding">请求参数位置</th>
                    <th width="20%" class="ng-binding">后端参数名字</th>
                    <th class="ng-binding">后端参数位置</th>
                    <th width="10%" class="ng-binding">操作</th>
                </tr>
                <#if context.api?? && context.api.serverEntrance.body.params?exists>
                    <#list context.api.serverEntrance.body.params as item>
                        <#if item.type == 2>
                            <tr class="ng-scope">
                                <td><input value="${item.apiParamName!}"
                                           class="form-control w-25">
                                </td>
                                <td>
                                    <select class="form-select isPassSelectBody">
                                        <option value="QUERY"
                                                <#if item.apiParamPosition =="QUERY">selected="selected"</#if>>
                                            QUERY
                                        </option>
                                        <option value="PATH"
                                                <#if item.apiParamPosition =="PATH">selected="selected"</#if>>
                                            PATH
                                        </option>
                                        <option value="HEADER"
                                                <#if item.apiParamPosition =="HEADER">selected="selected"</#if>>
                                            HEADER
                                        </option>
                                    </select>
                                </td>
                                <td><input value="${item.serParamName!}"
                                           class="form-control w-25">
                                </td>
                                <td>
                                    <select class="form-select w-25 isPassSelectBody">
                                        <option value="QUERY"
                                                <#if item.serParamPosition =="QUERY">selected="selected"</#if>>
                                            QUERY
                                        </option>
                                        <option value="PATH"
                                                <#if item.serParamPosition =="PATH">selected="selected"</#if>>
                                            PATH
                                        </option>
                                        <option value="HEADER"
                                                <#if item.serParamPosition =="HEADER">selected="selected"</#if>>
                                            HEADER
                                        </option>
                                    </select>
                                </td>
                                <td style="text-align:center;"><a style="white-space:nowrap"><span
                                                style="cursor:pointer;" class=""
                                                onclick="delParam(this)">移除</span></a></td>
                            </tr>
                        </#if>
                    </#list>
                </#if>
                </tbody>
            </table>
        </div>
        <div class="pagination-gird-container request-param-setter-errormessage ng-binding ng-hide">
            <i class="icon-no-2 console-mr1 console-inline-block"></i>
        </div>
        <div class="console-clearfix" style="padding-bottom: 10px; padding-top: 10px;">
            <span class="console-button-wrap ng-isolate-scope" theme="green" size="tiny"
                  icon="add">
                <a class="console-button console-button-green console-button-tiny addPassParam">
                    <span>
                        <span class="ng-scope ng-binding">增加一条</span>
                    </span>
                </a>
            </span>
        </div>
    </div>

    <div class="console-panel console-mt4">
        <div class="console-panel-header">
            <span class="console-panel-header-line"></span>
            <div class="console-float-left ng-binding clearfloat" style="font-weight: bold;">自定义常量参数

            </div>
        </div>

        <div class="api-param-map-setter ms1">
            <table>
                <tbody>
                <tr>
                    <th width="20%" class="ng-binding">后端参数名称</th>
                    <th width="20%" class="ng-binding">参数值</th>
                    <th width="20%" class="ng-binding">参数位置</th>
                    <th class="ng-binding">描述</th>
                    <th width="10%" class="ng-binding">操作</th>
                </tr>
                <#if context.api?? && context.api.serverEntrance.body.params?exists>
                    <#list context.api.serverEntrance.body.params as item>
                        <#if item.type == 9>
                            <tr class="ng-scope">
                                <td><input value="${item.serParamName!}"
                                           class="form-control w-25">
                                </td>
                                <td><input value="${item.paramValue!}"
                                           class="form-control w-25">
                                </td>
                                <td>
                                    <select class="form-select w-25 isPassSelectBody">
                                        <option value="QUERY"
                                                <#if item.serParamPosition =="QUERY">selected="selected"</#if>>
                                            QUERY
                                        </option>
                                        <option value="PATH"
                                                <#if item.serParamPosition =="PATH">selected="selected"</#if>>
                                            PATH
                                        </option>
                                        <option value="HEADER"
                                                <#if item.serParamPosition =="HEADER">selected="selected"</#if>>
                                            HEADER
                                        </option>
                                    </select>
                                </td>
                                <td><input value="${item.describe!}"
                                           class="form-control w-25">
                                </td>
                                <td style="text-align:center;"><a style="white-space:nowrap"><span
                                                style="cursor:pointer;" class=""
                                                onclick="delParam(this)">移除</span></a></td>
                            </tr>
                        </#if>
                    </#list>
                </#if>
                </tbody>
            </table>
        </div>
        <div class="pagination-gird-container request-param-setter-errormessage ng-binding ng-hide">
            <i class="icon-no-2 console-mr1 console-inline-block"></i>
        </div>
        <div class="console-clearfix" style="padding-bottom: 10px; padding-top: 10px;">
            <span class="console-button-wrap ng-isolate-scope" theme="green" size="tiny"
                  icon="add">
                <a class="console-button console-button-green console-button-tiny addConstant">
                    <span>
                        <span class="ng-scope ng-binding">增加一条</span>
                    </span>
                </a>
            </span>
        </div>
    </div>


    <div class="console-panel console-mt4">
        <div class="console-panel-header">
            <span class="console-panel-header-line"></span>
            <div class="console-float-left ng-binding" style="font-weight: bold;">系统参数
                <span class="console-form-tip-inline console-grey console-ml2">
                    <a class="console-mr2" href="javascript:;" style="white-space:nowrap">
                        <i class="icon-help-2 console-mr1 console-inline-block"></i>
                    </a>
                </span>
            </div>
        </div>

        <div class="api-param-map-setter ms2">
            <table>
                <tbody>
                <tr>
                    <th width="20%" class="ng-binding">系统参数名</th>
                    <th width="20%" class="ng-binding">后端参数名称</th>
                    <th width="20%" class="ng-binding">参数位置</th>
                    <th width="20%" class="ng-binding">描述</th>
                    <th width="10%" class="ng-binding">操作</th>
                </tr>
                <#if context.api?? && context.api.serverEntrance.body.params?exists>
                    <#list context.api.serverEntrance.body.params as item>
                        <#if item.type == 1>
                            <tr class="ng-scope">
                                <td>
                                    <select class="form-select w-25 sysPN"
                                            onchange="sysParamChange(this)">
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_HOST"
                                                <#if item.sysParamType =="CLIENT_HOST">selected="selected"</#if>>
                                            CLIENT_HOST
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_PORT"
                                                <#if item.sysParamType =="CLIENT_PORT">selected="selected"</#if>>
                                            CLIENT_PORT
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_PATH"
                                                <#if item.sysParamType =="CLIENT_PATH">selected="selected"</#if>>
                                            CLIENT_PATH
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_SESSION_ID"
                                                <#if item.sysParamType =="CLIENT_SESSION_ID">selected="selected"</#if>>
                                            CLIENT_SESSION_ID
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_ABSOLUTE_URI"
                                                <#if item.sysParamType =="CLIENT_ABSOLUTE_URI">selected="selected"</#if>>
                                            CLIENT_ABSOLUTE_URI
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="CLIENT_REQUEST_SCHEMA"
                                                <#if item.sysParamType =="CLIENT_REQUEST_SCHEMA">selected="selected"</#if>>
                                            CLIENT_REQUEST_SCHEMA
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="SERVER_API_NAME"
                                                <#if item.sysParamType =="SERVER_API_NAME">selected="selected"</#if>>
                                            SERVER_API_NAME
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="SERVER_UNIX_TIME"
                                                <#if item.sysParamType =="SERVER_UNIX_TIME">selected="selected"</#if>>
                                            SERVER_UNIX_TIME
                                        </option>
                                        <option ng-repeat="option in systemParameterList"
                                                ng-disabled="selectedSystemParameters[option.ParamName] &amp;&amp; option.ParamName != param.ParameterName"
                                                class="ng-scope " value="SERVER_USER_AGENT"
                                                <#if item.sysParamType =="SERVER_USER_AGENT">selected="selected"</#if>>
                                            SERVER_USER_AGENT
                                        </option>
                                    </select>
                                </td>
                                <td><input value="${item.serParamName!}"
                                           class="form-control w-25" type="text">
                                </td>
                                <td>
                                    <select class="form-select w-25 isPassSelectBody">
                                        <option value="QUERY"
                                                <#if item.serParamPosition =="QUERY">selected="selected"</#if>>
                                            QUERY
                                        </option>
                                        <option value="PATH"
                                                <#if item.serParamPosition =="PATH">selected="selected"</#if>>
                                            PATH
                                        </option>
                                        <option value="HEADER"
                                                <#if item.serParamPosition =="HEADER">selected="selected"</#if>>
                                            HEADER
                                        </option>
                                    </select>
                                </td>
                                <td class=" sysDescribe"
                                    style="text-align:center;">${item.describe!}</td>
                                <td><a href="javascript:;" class=""><span onclick="delParam(this)">移除</span></a>
                                </td>
                            </tr>
                        </#if>
                    </#list>
                </#if>
                </tbody>
            </table>
        </div>

        <div class="console-clearfix" style="padding-bottom: 10px; padding-top: 10px;">
            <span class="console-button-wrap ng-isolate-scope" theme="green" size="tiny"
                  icon="add">
                <a target=""
                   class="console-button console-button-green console-button-tiny addSysParam">
                    <i class="icon-add"></i>
                    <span>
                        <span class="ng-scope ng-binding"
                              style="display:inline-block;">增加一条</span>
                    </span>
                </a>
            </span>
        </div>
    </div>
    <!-- createAppPage End -->
</div>